<script setup lang="ts">
import { useRouter } from "vue-router";
import { RouterLink, RouterView } from "vue-router";

const router = useRouter()
const toDemo = ()=>{
  router.push({path:'/demo'})
}
const toHello = ()=>{
  router.push({name:'hello'})
}


</script>

<template>
<div id="d1">
  <div id="d2">
    <RouterLink to="/demo">去demo</RouterLink>
    <br>
    <RouterLink to="/hello">去hello</RouterLink>
    <br>
    <button @click="toDemo">去demo</button>
    <br>
    <button @click="toHello">去hello</button>
  </div>
  <div id="d3">
    <RouterView>
    </RouterView>
  </div>
</div>
</template>

<style scoped>
h1{color:red}
#d1{display:flex}
#d2{width: 1000px;
height:1000px;
  background-color: green;
}
</style>